<template>
  <div class="demo">
    <h1 v-text="msg" ref="title"></h1>
    <button @click="showDOM" ref="btn">点我输出上方的DOM元素</button>
    <School ref="sch" id="school" />
  </div>
</template>

<script>
  // 引入School组件
  import School from "./components/School"

  export default {
    name: "App",
    components: {
      School
    },
    data() {
      return {
        msg: "欢迎学习Vue!"
      };
    },
    methods: {
      showDOM() {
        console.log(this.$refs)
        console.log(this.$refs.title)                 // 真实DOM元素
        console.log(this.$refs.btn)                   // 真实DOM元素
        console.log(this.$refs.sch)                   // School组件的实例对象（vc组件）
        console.log(document.getElementById("school"))// 组件的DOM结构 包含id属性
      }
    }
  };
</script>

<style>

</style>